<template>
  <div>
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="add" v-model.trim="todoTitle">
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
  name: 'TodoHeader',
  data() {
    return {
      todoTitle: ''
    }
  },
  methods: {
    add() {
      if (!this.todoTitle) return alert('任务名称不能为空')
      const newTodo = {
        id: nanoid(),
        title: this.todoTitle,
        completed: false
      }
      // this.addTodo(newTodo)
      this.$emit('addTodo', newTodo)
      this.todoTitle = ''
    }
  }
}
</script>